<!--
 * @Author: panda
 * @Date: 2022-05-18 12:25
 * @Description: 考证视图
-->
<template>
  <!-- 将分类名和分类下的视频卡片信息通过props传给NormalModule组件 -->
  <!-- v-if 处理异步数据请求延迟问题，数据接收了再发送给子组件NormalModule -->
  <div v-for="(videos, index) in videoList.videos" :key="index">
    <NormalModule :title="index" :videos="videos" />
    <!-- v-if="typeof videoList.videos != 'undefined'" -->
  </div>
</template>

<script lang="ts">
import { defineComponent,  reactive } from 'vue'
import NormalModule from '@/components/normalModule/NormalModule.vue'
import { videoApi } from '@/api/video'
import { VideoList } from '@/api/model/video'

export default defineComponent({
  name: 'CertificateView',
  components: {
    NormalModule
  },

  setup () {
    const page = 'certificate'
    // 通过自定义类声明当前视图的接收回来的响应式数据
    const videoList = reactive(new VideoList())
    videoApi.getVideoCardInfo({page})
      .then((response: any) => {
        // data就是一个类目数组的对象
        videoList.videos = response.data.data
        // console.log("====certificate========", videoList.videos.computer[1]);
      })
      .catch((error: any) => {
        console.log('error=>', error)
      })
    return {
      videoList
    }
  }
})
</script>

<style scoped>
</style>
